<template>

<!-- 双向数据绑定,事件的介绍以及ref获取dom节点 -->
    <div>

        <h2>{{msg}}</h2>
        

        <input type="text" v-model="msg"/>

        <button v-on:click="get()">获取表单中的数据</button>
        <button v-on:click="set()">设置表单中的数据</button>

        <hr>
        <br>
        <br>

        <!-- ref获取DOM节点 -->

        <input type="text" ref="useifo">

        <!-- 原生js改变背景颜色 -->
        <div ref="box">我的颜色可以改变</div>

        <button  v-on:click="getDomVule()">获取input中的值</button>
  
    </div>
</template>


<script>

/** 双向数据绑定
 * 
 * M  model
 * 
 * V  View
 * 
 * MVVM   数据改变会影响视图的改变,    视图的改变会影响数据
 * 
 * 注意: 双向数据绑定  必须在表单中使用.
 * 
 * 
*/
export default {
  name: 'app',
  data () {     /**业务逻辑里面定义的数据 */
    return {
      msg: '这是第二个组件',

    text: 'hello world',
    flag: true,

    // 例一


    }
  },methods:{

        get(){
            alert(this.msg);
        },

        set(){
            this.msg = "表单中的数据我们进行了设置"
        },

        getDomVule(){
            alert(this.$refs.useifo.value);


            // 调用原生js改变样式
            this.$refs.box.style.background = 'red'
        }


  }
   
}
</script>



<style lang="scss">
        .box {
            width: 50%;
            height: 100px;
        }
</style>